<template>
  <div>
         <!-- 右侧二维码 -->
    <div class="r-menus" id="r-menus" :style="menuCss"  @mouseenter="enter()" @mouseleave="leave()">
        <ul>
            <li>
                <img src="@/assets/img/ewm.png" alt="">
                <p>医竞采 <span>公众号</span></p>
            </li>
            <li>
                <img src="@/assets/img/xcx.png" alt="">
                <p>医竞采 <span>移动端</span></p>
            </li>
            <li>
                <img src="@/assets/img/man.png" alt="">
            </li>
        </ul>
    </div>

    <!-- 头部 -->
    <nav>
        <div class="w">
            <p>HI，欢迎来到医竞采</p>
            <ul>
                <li>你好，欢迎<a href="#" class="green" v-if="userInfo">{{userInfo.phoneNumber}}</a></li>

                <li v-if="userInfo">
                    <a href="#"  id="logoutbtn" @click="outLogin">
                      退出
                    </a>
                </li>

                <li>
                    <router-link to="/my/bidlist"  :class="tab5_class">
                      我的
                    </router-link>
                </li>

                <li>
                    <router-link to="/my/notice" :class="tab6_class">
                      消息
                    </router-link>
                </li>

               <!--  <li>
                    <router-link to="/" >
                      客服
                    </router-link>
                </li> -->
            </ul>
        </div>
    </nav>

    <!-- 导航 -->
    <header class="w">
        <div class="logo">
            <router-link to="/" >
              <img src="@/assets/img/em.png" alt="">
            </router-link>
        </div>
        <ul>
            <li>
               <router-link to="/" :class="tab1_class">
                  首页
                </router-link>
            </li>
            <li>
                <router-link to="/bid/bidcenter" :class="tab2_class">
                  招标中心
                </router-link>
            </li>
            <li>
                 <router-link to="/my/bidlist" :class="tab3_class">
                  我的订单
                 </router-link>
            </li>
            <li>
                <router-link to="/about" :class="tab4_class">
                  关于我们
                </router-link>
            </li>
        </ul>
        <router-link to="/bid/pushbid" :class="tab4_class">
           <button type="botton">我要招标</button>
        </router-link>
    </header>

    <!-- 弹窗 -->
    <Pdailog :is-show="dailogShow" :is-confirm="true"  @on-close="closeDialog" @on-confirm="confirmDialog">
         <div slot="main">退出登录，无法看到订单信息，确定退出？</div>
     </Pdailog>
       
  </div>
</template>

<script>
import Pdailog from '@/components/Pdailog.vue'

export default {
  // name: 'bartab',
  data () {
    return {
      userInfo:'',
      //class item act
      tab1_class:'',
      tab2_class:'',
      tab3_class:'',
      tab4_class:'',

      tab5_class:'',
      tab6_class:'',

      dailogShow:false,
      menuCss:'right:5px',
      screenWidth: document.body.clientWidth
    }
  },
  methods: {
    outLogin(){
      this.dailogShow = true
    },
    //关闭弹窗
   closeDialog(){
        this.dailogShow=false;
   },
   //确认按钮
   confirmDialog(){
        localStorage.setItem('userInfo','')
        this.userInfo = ''
        this.dailogShow=false;
   },
   //移入事件
   enter(){
    if(this.screenWidth < 1450){
        this.menuCss = 'right:5px'
    }

   },
   //移出时间
   leave(){
    if(this.screenWidth < 1450){
        this.menuCss = 'right:-100px'
    }

   }

   
  },
  components:{
      Pdailog
  },
  created(){
    if(this.screenWidth < 1450){
        this.menuCss = 'right:-100px'
    }

     this.userInfo = this.getUserInfo();
    // console.log(this.userInfo.phoneNumber)
    if(this.$route.path == '/'){
      this.tab1_class='active';
    }else if(this.$route.path == '/my/bidlist'){
      this.tab3_class='active';//订单列表
      this.tab5_class='green'; //我的
    }else if(this.$route.path == '/about'){
      this.tab4_class='active';
    }else if(this.$route.path == '/my/notice'){
      this.tab6_class='green';//消息

    }else if(this.$route.path == '/bid/bidcenter' || this.$route.path == '/bid/typebidlist' || this.$route.path == '/bid/onedetail' || this.$route.path == '/bid/twodetail' || this.$route.path == '/bid/threedetail' || this.$route.path == '/bid/pushbid' || this.$route.path == '/bid/enddetail' || this.$route.path == '/bid/notdetail' || this.$route.path == '/bid/showdetail'){
      
       this.tab2_class='active';

    }
      

   
  }
  
}
</script>

